<template>
  <div id="playTime"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      myChart: "",
    };
  },
  mounted() {
    this.winSize();
    window.onresize = () => {
      return (() => {
        var ratioX = window.innerWidth / 370;
        var ratioY = window.innerHeight / 188;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      })();
    };
  },
  methods: {
    // 绘制图表
    setEcharts() {
      this.myChart = this.$echarts.init(document.getElementById("playTime"));
      var myColor = [
        "#eb2100",
        "#eb3600",
        "#d0570e",
        "#d0a00e",
        "#34da62",
        "#00e9db",
        "#00c0e9",
        "#0096f3",
        "#33CCFF",
        "#33FFCC",
      ];
      let option = {
        backgroundColor: "#0e2147",
        grid: {
          left: "11%",
          top: "12%",
          right: "0%",
          bottom: "8%",
          containLabel: true,
        },
        yAxis: 
          {
            // show: false,
            type:'value'
          },
          
        
        xAxis: [
          {
            type:"category",
            axisTick: "none",
            axisLine: "none",
            offset: "27",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "16",
              },
            },
            data: [1,2,3,4 ],
          },
          {
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "16",
              },
            },
            data: ["10", "9", "8", "7", "6", "5", "4", "3", "2", "1"],
          },
          {
            name: "分拨延误TOP 10",
            nameGap: "50",
            nameTextStyle: {
              color: "#ffffff",
              fontSize: "16",
            },
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0)",
              },
            },
            data: [],
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            xAxisIndex: 0,

            data: [ 25, 38,  60, 72],
            label: {
              normal: {
                show: true,
                position: "top",
                textStyle: {
                  color: "#ffffff",
                  fontSize: "16",
                },
              },
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            z: 2,
          },
          {
            name: "白框",
            type: "bar",
            xAxisIndex: 1,
            barGap: "-110%",
            barGap: "-50%",
            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            data: [99, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "#0e2147",
                barBorderRadius: 5,
              },
            },
            z: 1,
          },
          {
            name: "外框",
            type: "bar",
            xAxisIndex: 2,
            barGap: "50%",
            // barGap: "-100%",

            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            data: [100, 100, 100, 100],
            barWidth: 24,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
                barBorderRadius: 5,
              },
            },
            z: 0,
          },
          {
            name: "外圆",
            type: "scatter",
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            data: [0, 0, 0, 0],
            xAxisIndex: 2,
            symbolSize: 35,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
                opacity: 1,
              },
            },
            z: 2,
          },
        ],
      };
      this.myChart.setOption(option);
    },
    // 自适应
    winSize() {
      var ratioY = window.innerHeight / 188;
      var ratioX = window.innerWidth / 370;
      window.document.body.style.transform = "scale(" + ratioY + ")";
      window.document.body.style.transformOrigin = "0px 0px";
      // this.getalarmType();
      this.setEcharts();
    },
  },
};
</script>

<style scoped lang="less">
#playTime {
  display: flex;
  width: 370px;
  height: 170px;
  padding: 0.2rem 0.15rem;
  box-sizing: border-box;
}
</style>
